import React, { useEffect } from "react";
import { useAuth } from '../context/AuthProvider';
import { View, Text, Image, Button, StyleSheet,ImageBackground } from 'react-native';
import { Entypo } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";

const Setting = ({ navigation }) => {
    const { user,setUser, deleteUser } = useAuth();
    const Center = () => {
        navigation.navigate('tab')
    }
    const onAddress = () => {
        navigation.navigate('DeliveryAddress')
    }
    const onInformation = () => {
        navigation.navigate('ModifyInformation')
    }
    const onLogin = () => {
        setUser({});
        deleteUser;
        console.log(user);
        navigation.navigate('Login')
    }
    const onAgainLogin = () => {
        navigation.navigate('AgainLogin')
    }
    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (
                <View style={{ width: 100 }}>
                    <Text onPress={() => Center()}>
                        <AntDesign
                            name='arrowleft'
                            size={25}
                            color="black"
                        />
                    </Text>
                </View>
            ),
        })
    }, [])

    return (
        <View style={{ flex: 1 }}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <View style={styles.djx1}>
                    <Text style={styles.djx2}>
                        {
                            JSON.stringify(user) === "{}"
                                ? <Entypo
                                    name='add-user'
                                    size={64}
                                />
                                : <Image source={{ uri: user.avatarUrl }} />
                        }
                    </Text>
                    <View style={styles.djx3}>
                        <Text style={{ height: "30%", marginTop: "2%" }}>
                            {
                                JSON.stringify(user) === "{}"
                                    ? '未登录'
                                    : <Text>用户名：{user.userName}</Text>
                            }
                        </Text>
                        <Text style={{ height: "30%" }}>
                            {
                                JSON.stringify(user) === "{}"
                                    ? '未登录'
                                    : <Text>生日：{user.birthday}</Text>
                            }
                        </Text>
                        <Text style={{ height: "30%" }}>
                            {
                                JSON.stringify(user) === "{}"
                                    ? '未登录'
                                    : <Text>性别：{user.sex}</Text>
                            }
                        </Text>
                    </View>
                </View>
                <View style={styles.djx8}>
                    <Text style={{ marginLeft: "10%", marginTop: "4.5%", fontSize: 17 }}>
                        我的收货地址
                    </Text>
                    <Text style={{ marginTop: "-7%", marginLeft: "85%" }} onPress={() => onAddress()}>
                        <Entypo
                            name='chevron-right'
                            size={36}
                        />
                    </Text>
                </View>
                <View style={styles.djx8}>
                    <Text style={{ marginLeft: "10%", marginTop: "4.5%", fontSize: 17 }}>
                        修改信息
                    </Text>
                    <Text style={{ marginTop: "-7%", marginLeft: "85%" }} onPress={() => onInformation()}>
                        <Entypo
                            name='chevron-right'
                            size={36}
                        />
                    </Text>
                </View>
                <View style={styles.djx8}>
                    <Text style={{ marginLeft: "10%", marginTop: "4.5%", fontSize: 17 }}>
                        信息通知
                    </Text>
                    <Text style={{ marginTop: "-7%", marginLeft: "85%" }}>
                        <Entypo
                            name='chevron-right'
                            size={36}
                        />
                    </Text>
                </View>
                <View style={styles.djx8}>
                    <Text style={{ marginLeft: "10%", marginTop: "4.5%", fontSize: 17 }}>
                        隐私
                    </Text>
                    <Text style={{ marginTop: "-7%", marginLeft: "85%" }}>
                        <Entypo
                            name='chevron-right'
                            size={36}
                        />
                    </Text>
                </View>
                <View style={styles.djx8}>
                    <Text style={{ marginLeft: "10%", marginTop: "4.5%", fontSize: 17 }}>
                        关于APP
                    </Text>
                    <Text style={{ marginTop: "-7%", marginLeft: "85%" }}>
                        <Entypo
                            name='chevron-right'
                            size={36}
                        />
                    </Text>
                </View>
                <View style={{ width: "90%", marginLeft: "5%", marginTop: 30 }}>
                    <Button
                        title="切换账号"
                        onPress={() => onAgainLogin()}
                    />
                </View>
                <View style={{ width: "90%", marginLeft: "5%", marginTop: 15 }}>
                    <Button
                        title="退出登录"
                        onPress={() => onLogin()}
                    />
                </View>
            </ImageBackground>
        </View>

    );
}

const styles = StyleSheet.create({
    djx1: {
        width: "90%",
        height: 100,
        backgroundColor: "white",
        marginLeft: "5%",
        marginTop: 15,
        borderRadius: 23,
        borderColor: "lightgrey",
        borderWidth: 1,
    },
    djx2: {
        width: "20%",
        height: "80%",
        marginLeft: "5%",
        marginTop: "2.5%",
        marginBottom: 5,
    },
    djx3: {
        width: "50%",
        height: 70,
        marginLeft: "30%",
        marginTop: "-20%",
    },
    djx8: {
        width: "90%",
        height: 60,
        backgroundColor: "white",
        borderColor: "lightgrey",
        borderWidth: 1,
        borderRadius: 23,
        marginLeft: "5%",
        marginTop: 15
    },
    djx9: {
        marginLeft: "8%",
        marginTop: "5%"
    },
    bgimg:{
        flex: 1,
        resizeMode: "cover",
    },
});

export default Setting